import Taro from '@tarojs/taro';
import {Image, View, Block} from '@tarojs/components';
import {connect} from "@tarojs/redux";
import {request, unite} from '../../../utils/index';
import './classroomDetail.scss';
import SelectList from "../../../components/select-list/selectList";
import Modal from '../../../components/modal/Modal';
import TimeAdd from "../../../asset/myImages/ime_add.png";
import None from "../../../asset/images/none.png";
import BgSelect from "../../../asset/myImages/bg_.png";
import BgSelect1 from "../../../asset/myImages/bg_1.png";
import BgSelect2 from "../../../asset/myImages/bg_2.png";


class MyCoupon extends Taro.Component {
    config = {
        navigationBarTitleText: '教室',
        navigationBarBackgroundColor: '#F6F7F7',
        // navigationStyle:'custom',
    };

    state = {
        modalStatus: false,
        selectWrap: [],
        classDate: '',
        classId: 0, //星期对应的数字
        dataWrap: [], //
        roomIs: [],//时间选择最多三个
        tanchuanIs: 0, //取消索引
    };

    temp = {
        on_status: false
    };

    componentDidMount() {
        const params = {
            url: '/wx/room/initWeekDay',
            data:{}
        };
        request(params).then(res => {
            if (res) {
                if(res.code == 200) {
                    if (res && res.data) {
                        this.setState({
                            selectWrap: res.data,
                            classDate: res.data[0].dayOfWeekName,
                            classId: res.data[0].dayOfWeekValue,
                        }, () => {
                            this.getDataList(); //获取时间端
                        });
                    }
                }
            }
        })
    }

    //获取时间端
    getDataList = () => {
        const {classId} = this.state;
        const params = {
            url: '/wx/room/getRoomDispatchList',
            data:{
                classWeekDate: classId,
                roomId: this.$router.params.id,
            }
        };
        request(params).then(res => {
            if (res) {
                if(res.code == 200) {
                    if (res && res.data) {
                        this.setState({
                            dataWrap: res.data
                        })
                    }
                }
            }
        })
    };

    tanchuanModel = (ix) => {
        this.setState(PrevState => ({
            modalStatus: !PrevState.modalStatus,
            tanchuanIs: ix,
        }))
    };

    getTimers = (time, index) => {
        this.setState({
            classDate: time,
            classId: index,
        }, () => {
            this.getDataList();
        });
    };

    //拨打电话
    confirmPhone = () => {
        this.setState(prevState => {
            return {
                modalStatus: false
            }
        }, () => {
            const {tanchuanIs, dataWrap, classId} = this.state;
            const {userToken} = this.props;
            if (this.temp.on_status) return;
            this.temp.on_status = true;
            let roomTime = dataWrap;
            roomTime[tanchuanIs].status = 1;
            const params = {
                url: '/wx/room/batchEdit?accessToken=' + userToken,
                data:{
                    classWeekDate: classId,
                    roomDispatchs: roomTime,
                    roomId: this.$router.params.id,
                }
            };
            request(params).then(res => {
                this.temp.on_status = false;
                if (res) {
                    if(res.code == 200) {
                        unite.showToast('取消成功');
                        setTimeout(() => {
                            this.getDataList();
                        }, 1500)
                    } else {
                        this.temp.on_status = false;
                    }
                } else {
                    this.temp.on_status = false;
                }
            })
        })
    };

    getSelectTime = (index, enable) => {
        if (enable == 0) return;
        const {roomIs} = this.state;
        for(let i = 0; i < roomIs.length; i++){
            if (roomIs[i] == index) {
                this.setState(prevState => {
                    prevState.roomIs.splice(i, 1);
                    return {
                        roomIs: prevState.roomIs,
                    }
                }, () => {
                    console.log(JSON.stringify(this.state.roomIs))
                });
                return;
            }
        }
        if (roomIs.length >= 3) return;
        this.setState(prevState => {
            prevState.roomIs.push(index);
            return {
                roomIs: prevState.roomIs,
            }
        });
    };

    //确认上传
    sumbit = () => {
        const {dataWrap, roomIs, classId} = this.state;
        const {userToken} = this.props;
        if (roomIs.length == 0) return unite.showToast('请选择时间段');
        if (this.temp.on_status) return;
        this.temp.on_status = true;
        let roomTime = dataWrap;
        roomIs.forEach((item) => {
            roomTime[item].status = 0;
        });

        const params = {
            url: '/wx/room/batchEdit?accessToken=' + userToken,
            data:{
                classWeekDate: classId,
                roomDispatchs: roomTime,
                roomId: this.$router.params.id,
            }
        };
        request(params).then(res => {
            if (res) {
                if(res.code == 200) {
                    unite.showToast('上传成功');
                    setTimeout(() => {
                        Taro.navigateBack({delta: 1})
                    }, 1500)
                } else {
                    this.temp.on_status = false;
                }
            } else {
                this.temp.on_status = false;
            }
        })
    };

    render() {
        const {modalStatus, selectWrap, classDate, dataWrap,roomIs} = this.state;
        return (
            <View className="myPage">
                {/*<View className="head-tops" style={'height:' + (Taro.getSystemInfoSync()['statusBarHeight']+43) + 'px;'}>*/}
                {/*    <View className="head-img-return" onClick={() => {Taro.navigateBack({delta: 1})}}></View>*/}
                {/*    <View className="head-text">教室</View>*/}
                {/*</View>*/}
                <View className="detail-content-wrap" style={'padding-top:' + (Taro.getSystemInfoSync()['statusBarHeight']+58) + 'px;'}>
                    <View className="content-title-wrap flex-l">
                        <View className="left-heng"></View>
                        <View>时间选择</View>
                    </View>
                    {selectWrap && selectWrap.length != 0 &&(
                        <SelectList
                            getClassDate={classDate}
                            onTimer={this.getTimers}
                            onTimers={selectWrap}
                        />
                    )}
                    {dataWrap && dataWrap.length != 0 && (
                        <View className="class-room-content flex-l">
                            {dataWrap.map((item, index) => (
                                <View key={index} className="timer-item flex-center" onClick={this.getSelectTime.bind(this, index, item.status)}>
                                    <View>
                                        <View className="time">{item.classBeginTime +'-'+item.classEndTime}</View>
                                        {item.status == 0 && (
                                            <View className="flex-center">
                                                <View className="order-cx" onClick={this.tanchuanModel.bind(this, index)}>取消</View>
                                            </View>
                                        )}
                                    </View>
                                    {(item.status == 1) &&(
                                        <Image className="bg-select" src={BgSelect2}/>
                                    )}
                                    {roomIs.map((value, is) => (
                                        <Block key={is}>
                                            {value == index &&(
                                                <Image className="bg-select" key={is} src={BgSelect}/>
                                            )}
                                        </Block>
                                    ))}
                                    {item.status == 0 &&(
                                        <Image className="bg-select" src={BgSelect1}/>
                                    )}
                                </View>
                            ))}
                        </View>
                    )}
                    <View className="flex-r status-names-content">
                        <View className="flex-r namex">
                            <View className="red-quan yipai"></View>
                            <View>已开启</View>
                        </View>
                        <View className="flex-r namex">
                            <View className="red-quan daipai"></View>
                            <View>待开启</View>
                        </View>
                        <View className="flex-r namex">
                            <View className="red-quan"></View>
                            <View>选中</View>
                        </View>
                    </View>
                    {dataWrap && dataWrap.length == 0 && (
                        <View className="none-wrap-page">
                            <Image className="none-img" src={None}/>
                            <View>暂无排时</View>
                        </View>
                    )}
                    {dataWrap && dataWrap.length != 0 && (
                        <View className="max-btn-wrap flex-center">
                            <View className="max-btn flex-center" onClick={this.sumbit}>确认上传</View>
                        </View>
                    )}
                </View>
                {modalStatus &&(
                    <Modal messageText='是否取消该教室' onCancel={this.tanchuanModel} onConfirm={this.confirmPhone} confirmText='确定'/>
                )}
            </View>
        )
    }
}

const mapStateToProps = state => {
    let {userToken} = state;
    return {
        userToken
    }
};

const mapDispatchToProps = {
};

export default connect(mapStateToProps, mapDispatchToProps)(MyCoupon);



